import React from "react";

export default class CollectForm extends React.Component{
    //非受控组件 现用现取值
    // handleSubmit = (event) => {
    //     event.preventDefault();//阻止表单提交
    //     const {username,password} = this;
    //     const user=username.value;
    //     const psw=password.value;

    //     console.log(user,psw)
    // }
    // render(){
    //     return (
    //         <form onSubmit={this.handleSubmit}>
    //             账号：<input ref={(current)=>{this.username=current}} type="text" name="username"/>
    //             密码：<input ref={(current)=>{this.password=current}} type="password" name="password"/>
    //             <button>登录</button>
    //         </form>
    //     )
    // }

    //受控组件 一般写这种！
    //初始化状态
    state={
        username:"",
        password:""
    }
    setValue = (event) => {
        event.preventDefault();//阻止表单提交
        this.setState({
            [event.target.name]:event.target.value
        })
    }
    handleSubmit = (event) => {
             event.preventDefault();//阻止表单提交
             console.log(this.state)
         }
    render(){
        return (
            <form onSubmit={this.handleSubmit}>
                账号：<input type="text" name="username" onChange={this.setValue}/>
                密码：<input type="password" name="password" onChange={this.setValue}/>
                <button>登录</button>
            </form>
        )
    }
}